<template>
	<view class="container">
		<view class="content ">
			<view class="box1">
				<view class="head">
					更新个人信息
				</view>
				<view class="title">
					修改您的头像和昵称
				</view>
			</view>

			<view class="box2">
				<view class="img">
					<image :src="urlImg =='' ? popImg : urlImg " class="pic-cover"></image>
				</view>

				<button class="btns" type="balanced" open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<!-- <image :src="userInfo.head_img ==null? cirSrc1 :userInfo.head_img" class="pic-cover"
						mode="aspectFill"></image> -->
					选择新头像
				</button>
				<view class="line"></view>

				<view class="name">
					昵称
				</view>
				<view class="inpt">
					<input class="nickname" type="nickname" :value="name" @input="nameInput" @blur="nameInput" />
				</view>

				<view class="line"></view>
			</view>


			<view class="box3">
				<button class="btns1" @click="cancel">取消</button>
				<button class="btns2" @click="changeInfo">确认修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	import FormData from './../../../common/FormData.js'
	
import cache from "@/utils/cache.js";
	export default {
		props: ['popImg'],
		data() {
			return {
				url: '/static/newImg/myImg.png',
				urlImg: '',
				name: ''
			};
		},
		methods: {
			chooseavatar(e) {
				// https://goods.farmhelper.top
				// http://goods.farmhelper.top
				//图片链接转二进制 并上传图片到服务器
				uni.uploadFile({
					url: 'https://goods.farmhelper.top/wechat/tool/upload_img', // 仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					// formData:formData,
					name:'img',
					header: {
						// 'Content-Type': 'multipart/form-data',
						'token': cache('user_token', null)
					},
					success: (uploadFileRes) => {
						// console.log('上传成功：', uploadFileRes);
						// console.log(JSON.parse(uploadFileRes.data).result.url);
						this.urlImg = JSON.parse(uploadFileRes.data).result.url
						console.log(this.urlImg);
					},
					fail: (err) => {
						console.error('上传失败：', err);
					}
				});
				console.log(e)
				console.log(e.detail) 
				// const fileSystemManager = uni.getFileSystemManager();
				// return new Promise((resolve, reject) => {
				//        fileSystemManager.readFile({
				// 			filePath: e.detail.avatarUrl, // 图片临时路径
				// 			success: (data) => {
								
				// 				let file = data.data;
				// 				 console.log(file)
				// 				// this.$api.uploadImgApi({img:file}).then(res => { //调用封装的api
				// 				// 	if (res.code == 1) {
				// 				// 		this.userList = res.result
				// 				// 		this.ImgUrl = res.result.user.head_img
				// 				// 	}
				// 				// })
				// 						let formData = new FormData();
				// 						formData.append('img', file)
								
					// 		},
					// 		fail: (err) => {
					// 		console.log('读取文件失败', err);
					// 	}
					// }); 
				// });
				
			},
			nameInput(e) {
				console.log(e);
				// let nickName = e.detail.value
				// console.log(nickName);
				this.name = e.detail.value
				// wx.setStorageSync('nickName', nickName);
			},
			setName(name){
				this.name = name;
			},
			changeInfo() {
				this.$api.edit_infoApi({
					nickname: this.name,
					head_img: this.urlImg == '' ? this.popImg : this.urlImg  //没有上传就显示为原本头像
				}).then(res => {
					if (res.code == 1) {
						this.cancel()
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: '请先授权登陆',
							icon: 'error'
						})
					}
				})
			},
			cancel() {
				this.$emit('closePop')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		// 遮罩颜色
		background: rgba($color: #000000, $alpha: 0.5);

		.content {
			width: 320px;
			height: 480px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #fff;
			border-radius: 14px;

			.box1 {
				background: #F9F8FE;
				border-radius: 14px 14px 0 0;

				.head {
					padding: 18px 0 10px 0;
					text-align: center;
					font-family: Roboto, Roboto;
					font-weight: 500;
					font-size: 21px;
					color: #637BE9;
				}

				.title {
					padding: 0 0 20px 0;
					text-align: center;
					font-family: Roboto, Roboto;
					font-weight: 500;
					font-size: 14px;
					color: #ABB4BA;
				}
			}


			.box2 {
				// height: 220px;
				background-color: #fff;

				.img {
					width: 81px;
					height: 81px;
					border-radius: 50%;
					padding: 20px 0;
					margin: 0 auto;
					text-align: center;

					.pic-cover {
						width: 80px;
						height: 80px;
						border-radius: 50%;
					}
				}

				.btns {
					width: 262px;
					height: 46px;
					background: linear-gradient(180deg, #637BE9 0%, #637BE9 100%);
					border-radius: 14px;
					font-family: Poppins, Poppins;
					font-weight: 500;
					font-size: 17px;
					color: #FFFFFF;
					line-height: 46px;
					text-align: center;
					margin-bottom: 20px;
				}

				.line {
					width: 290px;
					height: 0px;
					text-align: center;
					margin: 0 auto;
					border-bottom: 1px solid #E8ECEF;
				}

				.line:last-child {
					margin-top: 20px;
				}

				.name {
					margin: 18px 0 10px 30px;
					font-family: Poppins, Poppins;
					font-weight: 500;
					font-size: 17px;
					color: #ABB4BA;
				}

				.inpt {
					margin: 0 auto;
					width: 262px;
					height: 46px;
					line-height: 46px;
					background: #FFFFFF;
					border-radius: 6px;
					border: 1px solid #C8CED2;

					.nickname {
						width: 262px;
						height: 46px;
						padding: 0 32rpx;
						line-height: 46px;
						font-family: Poppins, Poppins;
						font-weight: 500;
						color: #5E5E5E;
					}
				}

			}

			.box3 {
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 142rpx;
				width: calc(100% - 88rpx);
				padding: 0 44rpx;
				.btns1 {
					width: calc(50% - 8rpx);
					height: 80rpx;
					line-height: 80rpx;
					background: #F3F4F6;border-radius: 25rpx 25rpx 25rpx 25rpx;
					font-family: Poppins, Poppins;
					font-weight: 500;font-size: 30rpx;
					color: #5E5E5E;
					text-align: center;
					border: 0px;
					margin:0;
				}

				.btns1::after {
					border: 1px solid #F3F4F6;
				}

				.btns2 {
					width: calc(50% - 8rpx);
					margin:0;
					height: 80rpx;
					background: #637BE9;border-radius: 25rpx 25rpx 25rpx 25rpx;
					font-family: Poppins, Poppins;
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 80rpx;
					text-align: center;
				}
			}
		}
	}
</style>